<template>
  <div class="layout-parent w100 p10">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
        <VoluntaryDept
          :id="id"
          :type="'view'"
          @dataEmits="getData"
          ref="ContingencyNoticeRef"
        ></VoluntaryDept>
        <el-form ref="processExtFormRef" label-suffix=":" :model="formData"  label-width="120px" class="w100" v-if="(formData.cnbs == 0 || formData.cnbs == 1) && formData.jb == 10 && formData.lx == 20">
          <vp-card>
                <template #header><vp-label zh="处理结果" en="Handling Result"/></template>
              <el-row>
                <vp-col :span="1" v-if="(formData.cnbs == 0 || formData.cnbs == 1) && formData.jb == 10">
                    <template #label><vp-label zh="是否采纳" en="Whether Adopt"/></template>
                      <el-form-item  prop="cnbs" >
                        <vp-label v-if="formData.cnbs === 0" zh="确认无效/不采纳，关闭本报告" en="Confirmed invalid/not adopted, close this report"/>
                        <vp-label v-if="formData.cnbs === 1" zh="确认有效，采纳" en="Confirmed effective, adopted"/>
                      </el-form-item>
                  </vp-col>
                  </el-row>
                  <el-row>
                    <vp-col :span="1" v-if="formData.jb == 10 && formData.cnbs == 0">
                      <el-form-item prop="cnsm" >
                        <template #label><vp-label zh="不采纳原因" en="Reason"/></template>
                      {{ formData.cnsm }}
                      </el-form-item>
                    </vp-col>
                  </el-row>
                  <el-row>
                    <vp-col :span="4" v-if="formData.jb == 10 && formData.cnbs == 1">
                      <el-form-item prop="clr" >
                        <template #label><vp-label zh="处理人" en="Handler"/></template>
                        <span>{{ formData.clr }}</span>
                    </el-form-item>
                  </vp-col>
                  <vp-col :span="4" v-if="formData.jb == 10 && formData.cnbs == 1">
                    <el-form-item prop="clrq">
                      <template #label><vp-label zh="处理日期" en="Handling Date"/></template>
                        <span>{{ formData.clrq }}</span>
                    </el-form-item>
                  </vp-col>
                  <vp-col :span="1" v-if=" formData.jb == 10 && formData.cnbs == 1">
                    <el-form-item prop="cljg">
                      <template #label><vp-label zh="处理结果" en="Handling Result"/></template>
                      <span>{{ formData.cljg }}</span>
                    </el-form-item>
                  </vp-col>
               </el-row>
               <el-row v-if="formData.jb == 10 && formData.cnbs == 1">
                    <FileListCard
                      class="mt4 w100"
                      :readOnly="true"
                      :attachmentList.sync="formData.clglfjAttachemts"
                      @attachmentListEmit="getAttachmentListEmit($event)"
                    >
                    </FileListCard>
                  </el-row>  
            </vp-card>
         </el-form> 
         <el-form ref="processExtFormRef" label-suffix=":" :model="formData"  label-width="120px" class="w100" v-if="(formData.cnbs == 0 || formData.cnbs == 1) && formData.jb == 20">
          <vp-card>
                <template #header><vp-label zh="处理结果" en="Handling Result"/></template>
              <el-row>
                <vp-col :span="1" v-if="(formData.cnbs == 0 || formData.cnbs == 1) ">
                      <el-form-item  prop="cnbs" >
                        <vp-label v-if="formData.cnbs === 0" zh="确认无效/不采纳，关闭本报告" en="Confirmed invalid/not adopted, close this report"/>
                        <vp-label v-if="formData.cnbs === 1" zh="确认有效，采纳" en="Confirmed effective, adopted"/>
                      </el-form-item>
                  </vp-col>
                  </el-row>
                  <el-row>
                    <vp-col :span="1" v-if="formData.cnbs == 0">
                      <el-form-item prop="cnsm">
                        <template #label><vp-label zh="不采纳原因" en="Reason"/></template>
                      {{ formData.cnsm }}
                      </el-form-item>
                    </vp-col>
                    <vp-col :span="1" v-if="formData.cnbs == 1">
                      <el-form-item prop="cnsm" >
                        <template #label><vp-label zh="其他说明" en="Other Description"/></template>
                      {{ formData.cnsm }}
                      </el-form-item>
                    </vp-col>
                  </el-row>
            </vp-card>
            <div v-if="formData.cnbs == 1" v-for="handle in formData.handles" :key="handle.id">
              <vp-card>
                <template #header>
                    <vp-label zh="指定责任部门" en="Designated Responsible Department"/>
                  </template>
                  <el-row>
                    <vp-col :span="4">
                      <el-form-item prop="zrbm">
                        <template #label><vp-label zh="责任部门" en="Responsible Dept."/></template>
                        <span  >{{ handle.zrbm }}</span>
                      </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                      <el-form-item prop="zdfkr">
                        <template #label><vp-label zh="反馈人" en="Feedback Person"/></template>
                        <span  >{{ handle.zdfkr }}</span>
                      </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                      <el-form-item prop="fkqx">
                        <template #label><vp-label zh="反馈期限" en="Feedback Deadline"/></template>
                        <span  >{{ handle.fkqx }}</span>
                      </el-form-item>
                    </vp-col>
                  </el-row>
                  <el-row>
                    <vp-col :span="1">
                      <el-form-item prop="sm">
                        <template #label><vp-label zh="说明" en="Description"/></template>
                        <span  >{{ handle.sm }}</span>
                      </el-form-item>
                    </vp-col>
                  </el-row>
                  <el-row>
                  <vp-col :span="1" >
                    <el-form-item prop="clcs" >
                      <template #label><vp-label zh="处理措施" en="Handling Measures"/></template>
                        <span >{{ handle.clcs }}</span>
                    </el-form-item>
                  </vp-col>  
                </el-row>
                <el-row >
                  <vp-col :span="4" >
                    <el-form-item prop="clr" >
                      <template #label><vp-label zh="处理人" en="Handler"/></template>
                        <span  >{{ handle.clr }}</span>
                  </el-form-item>
                </vp-col>
                <vp-col :span="4" >
                  <el-form-item prop="clrq">
                    <template #label><vp-label zh="处理日期" en="Handling Date"/></template>
                    <span >{{ handle.clrq }}</span>
                  </el-form-item>
                </vp-col>
                <vp-col :span="1" >
                  <el-form-item prop="clqk" >
                    <template #label><vp-label zh="处理情况" en="Handling Status"/></template>
                      <span  >{{ handle.clqk }}</span>
                  </el-form-item>
                </vp-col>
                </el-row>
                <el-row>
                  <vp-col :span="1" >
                    <el-form-item prop="yfcs" >
                        <template #label><vp-label zh="预防措施" en="Preventive Measure"/></template>
                        <span  >{{ handle.yfcs }}</span>
                    </el-form-item>
                  </vp-col>  
                </el-row>
                <el-row>
                  <FileListCard
                    class="mt4 w100"
                    :readOnly="true"
                    :attachmentList.sync="handle.attachments"
                  >
                    <template #header>
                      <vp-label zh="附件" en="Attachment"/>
                    </template>
                </FileListCard>
                </el-row>
              </vp-card>
              <vp-card>
                <template #header>
                  <vp-label zh="处理结果验证" en="Handling Result Verification"/>
                </template>
                <el-row>
                  <el-form-item prop="yzyj" >
                    <template #label><vp-label zh="验证情况" en="Verification Status"/></template>
                        <span  >{{ handle.yzyj }}</span>
                  </el-form-item>
                </el-row>
              </vp-card>
            </div>
         </el-form> 
      </el-tab-pane>
      <el-tab-pane v-if="formData.processid">
        <template #label><vp-label zh="流程记录" en="Process Record"/></template>
        <ProcessHistory :processInsId="formData.processid" :hiddenCreator="formData.nmbs === 1" v-if="formData.id" />
      </el-tab-pane>
      <el-tab-pane v-if="formData.processid">
        <template #label><vp-label zh="流程图" en="Process Chart"/></template>
        <ProcessView :processInsId="formData.processid" />
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
        <RcList :id="formData.id" :hiddenCreator="formData.nmbs === 1" ref="rcListRef"></RcList>
      </el-tab-pane>
    </el-tabs>
    <StatusBar
      :id="formData.id"
      :status="formData.zt"
      :isValid="formData.yxbs"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent,  reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import VoluntaryDept from "./VoluntaryDept.vue";
import RcList from "/@/components/vp/operationRecord/VpOperationRecordCard.vue";
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from "/@/components/vp/workflow/ProcessView.vue";
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import StatusBar from '/@/components/vp/status/StatusBar.vue';

export default defineComponent({
  name: "viewVoluntaryDept",
  props: {
    id: String,
  },
  components: {
    RcList,
    VoluntaryDept,
    ProcessHistory,
    ProcessView,
    FileListCard,
    StatusBar
  },
  emits: ["formSubmited"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      formData: {
        id: "",
        zt: 10,
        yxbs: 1,
        jb: "",
        lx: "",
        processid: "",
        cnbs: null,
        cnsm: "",
        clrid: "",
        clrq: "",
        cljg: "",
        clr: "",
        handles: [],
      },
    });

    const editDialogRef = ref();
    const router = useRouter();
    const ContingencyNoticeRef = ref();
    const { t } = useI18n();

    const getData = (data: any) => {
      state.formData = data;
      console.info(state.formData);
    };

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      ContingencyNoticeRef,
      getData,
    };
  },
});
</script>

<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
</style>
